import React, {Component} from 'react';
import {observer, inject} from 'mobx-react'
import {List, Button, Stepper} from 'antd-mobile';

const Item = List.Item;


@inject('carOrderStore')
@observer
class CarPay extends Component {

    render() {
        const {orderInfo, payments, months, onChangeMonths, expirationTime, renewExpirationTime, paySubmit} = this.props.carOrderStore;
        console.log("payInfo", orderInfo);
        return (<div>
                <div style={{
                    backgroundColor: '#5DB75D',
                    width: '100%',
                    height: '180px',
                    fontSize: '25px',
                    textAlign: 'center',
                    lineHeight: '180px',
                    color: '#fff'
                }}>
                    应付费用：{payments}元
                </div>
                <List>
                    <Item extra={orderInfo ? orderInfo.plateNumber : ''}>车牌号</Item>
                    <Item extra={orderInfo ? orderInfo.parkName : ''}>停车场</Item>
                    <Item extra={orderInfo ? orderInfo.monthlyRate + '/月' : ''}>收费规则</Item>
                    <Item extra={expirationTime ? expirationTime : ''}>到期时间</Item>
                    <Item
                        wrap
                        extra={
                            <Stepper
                                className="ime-disabled"
                                style={{width: '100%', minWidth: '100px'}}
                                showNumber
                                max={36}
                                min={1}
                                value={months}
                                onChange={onChangeMonths}
                            />}
                    >
                        续费月数
                    </Item>
                    <Item extra={renewExpirationTime ? renewExpirationTime : ''}>续费到期时间</Item>
                </List>

                <div style={{
                    width: '100%',
                    position: 'fixed',
                    bottom: 0
                }}>

                    <Button className="am-button-submit" onClick={() => paySubmit(this.props)}>确定支付</Button>
                </div>

                <style>
                    {
                        `.am-button-submit {
                            color: #fff;
                            background-color: #5DB75D;
                            border-radius: 0px;
                        }
                        html:not([data-scale]) .am-button::before {
                            border: none;
                        }
                        .am-stepper-input {
                            ime-mode: disabled;
                        }
                        `
                    }
                </style>
            </div>
        );
    }
}

export default CarPay;